<template>
<!-- 	table 数据表格 -->
	<el-row>
		<el-col :span="24">
			<el-table :header-cell-style="{backgroundColor:'#F4F7FA',color:'gray'}"
				:data="tableData"
				stripe
				show-overflow-tooltip
			>
				<el-table-column type="index" width="50"/>
				<el-table-column prop="music_name" label="歌名" min-width="120px" />
				<el-table-column prop="music_author" label="歌手" sortable />
				<el-table-column prop="music_type" label="类型" sortable >
					<template #default="scope">
						<span v-if="scope.row.music_type === 4">其他</span>
						<span v-if="scope.row.music_type  === 1">华语</span>
						<span v-if="scope.row.music_type === 2">日韩</span>
						<span v-if="scope.row.music_type === 3">欧美</span>
						<span v-if="scope.row.music_type === 5">纯音乐</span>
					</template>
				</el-table-column>
				<el-table-column prop="music_state" label="状态" sortable>
				  <template #default="scope">
				    <span v-if="scope.row.music_state === 3">待审核</span>
				    <span v-if="scope.row.music_state  === 1">发布</span>
				    <span v-if="scope.row.music_state === 2">违规</span>
				  </template>
				</el-table-column>
				<el-table-column prop="music_level" label="等级" sortable>
				  <template #default="scope">
				    <span v-if="scope.row.music_level  === 1">认证</span>
				    <span v-if="scope.row.music_level === 2">公开</span>
				  </template>
				</el-table-column>
				<el-table-column prop="music_user_name" label="发帖人" sortable/>
				<el-table-column label="更新&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;详情&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;发布&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;违规" fixed="right" width="350">
					<template #default="scope">
						<el-button type="success" :icon="Edit" circle size="large" @click="Updatelevel(scope.row)"></el-button>
					<el-button type="primary" :icon="Expand" circle size="large" @click="showDetailPage(scope.row)"></el-button>
						<el-button type="warning" :icon="Select" circle size="large" @click="submitPass(scope.row)"></el-button>
						<el-button type="danger" :icon="CloseBold" circle size="large" @click="submitNoPass(scope.row)"></el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination style="float:right"
			      v-model:current-page="page.pageNum"
			      v-model:page-size="page.pageSize"
			      :page-sizes="[5, 10, 20, 50]"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="page.total"
			      @change="doList"
			/>
		</el-col>
	</el-row>
	
	<!-- 详情页面 -->
	<detail-page ref="detailPageRef" @flushPage="doFlushPage" ></detail-page>
	
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus'
import DetailPage from './DetailPage.vue'
import {
		Select,
		CloseBold,
		  Delete,
		  Edit,
		  Expand,
		} from '@element-plus/icons-vue'

//详情组件
const detailPageRef = ref();
const showDetailPage = (obj)=>{
	detailPageRef.value.handleDetailData(obj);
}

//------------------------- from 表单 -----------------------------
// 查询条件
const music = ref({
	music_id:null,
	music_name:'', //歌名
	music_author:'',  //歌手
	music_type:null,  //类型
	music_state:3,  //状态
	music_rm:null, //是否热门
	music_user_name:'',  //发帖人
})

// -------------------------- table 表格----------------------------
// 表格数据
const tableData = ref([
	
]);

// 分页信息
const page = ref({
	pageNum: 1,
	pageSize: 5,
	pages:0,
	total:0
})

const doPageReset = ()=>{
	page.value.pageNum = 1;
	page.value.pageSize = 5;
}

//--------------------------- CRUD ---------------------------
// 查询
const doList = ()=>{
	axios({
		url:'/api/music/list',
		method:'GET',
		params: Object.assign({},music.value,{pageNum:page.value.pageNum, pageSize:page.value.pageSize})
	}).then(response => {
		tableData.value = response.data.list;
		page.value.pages = response.data.pages;
		page.value.total = response.data.total;
	});
}
//修改歌曲等级
const Updatelevel = (obj) => {
	if(obj.music_level ===1){
		obj.music_level = 2;
	}else{
		obj.music_level = 1;
	}	
  axios({
  	url:'/api/music',
  	method:'Put',
  	params:Object.assign({},obj)
  }).then( response => {
  	if(response.data === true){
  		ElMessage.success("操作成功！");
  		doFlushPage();
  	}else{
  		ElMessage.error("操作失败！");
  	}
  });
 
}
// 提交审核通过
const submitPass = (obj) => {
	obj.music_state = 1;
  axios({
  	url:'/api/music',
  	method:'Put',
  	params:Object.assign({},obj)
  }).then( response => {
  	if(response.data === true){
  		ElMessage.success("操作成功！");
  		doFlushPage();
  	}else{
  		ElMessage.error("操作失败！");
  	}
  });
 
}
// 提交审核不通过
const submitNoPass = (obj) => {
	obj.music_state = 2;
  axios({
  	url:'/api/music',
  	method:'Put',
  	params:Object.assign({},obj)
  }).then( response => {
  	if(response.data === true){
  		ElMessage.success("操作成功！");
  		doFlushPage();
  	}else{
  		ElMessage.error("操作失败！");
  	}
  });
 
}

const doFlushPage = ()=>{
	doList();
	doPageReset();

}

onMounted(()=>{
	doList();
});

</script>

<style scoped>
</style>